<template>
  <div class="BreadcrumbBox">
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item class="Breadcrumb">
        <el-icon class="homeIcon"><HomeFilled /></el-icon>
      </el-breadcrumb-item>
      <el-breadcrumb-item class="Breadcrumb">{{
        route.meta.father
      }}</el-breadcrumb-item>
      <el-breadcrumb-item class="Breadcrumb">{{
        route.meta.title
      }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { useRoute } from "vue-router";

const route = useRoute();
</script>

<style lang="less" scoped>
.BreadcrumbBox {
  .Breadcrumb {
    font-size: 16px;
    .el-breadcrumb__inner {
      color: white;
    }
  }
}
.homeIcon{
  font-size: 18px;
}
</style>
